import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import SearchView from '@/components/searchView/index'
import { useLocation, useNavigate } from 'react-router-dom'
import {
  Space,
  Table,
  Button,
  Modal,
  Card,
  message,
  Popconfirm,
  Pagination,
  Checkbox,
  Col,
  Row,
  Image,
  Input,
  Divider
} from 'antd'
import {
  getstorelist2,
  storeAuditSerach,
  storeDelete,
  storePreorderedCreateExcel,
  storePreorderedDetils,
  storeChange
} from '@/http/api/store'
import dayjs from 'dayjs'
let pageData = {
  page: 1,
  size: 10,
  total: 0,
  status: 0,
  appid: localStorage.getItem('appid')
}
let typeList = [
  {
    title: '门店名称',
    type: 'inpute',
    model: 'name'
  },
  {
    title: '负责人',
    type: 'inpute',
    model: 'linkman'
  },
  {
    title: '门店区域',
    type: 'inpute',
    model: 'region'
  },
  {
    title: '联系方式',
    type: 'inpute',
    model: 'phone'
  }
]
let checkBoxOptions = [
  {
    label: '被驳回',
    value: '2'
  },
  {
    label: '待审核',
    value: '0'
  },
  {
    label: '已审核',
    value: '1'
  }
]
let selectedRowsdata = []
const App = React.forwardRef((props, ref) => {
  const [messageApi, contextHolder] = message.useMessage()
  const handleChildMethod = () => {
    getList()
  }

  React.useImperativeHandle(ref, () => ({
    handleChildMethod
  }))
  const Navigate = useNavigate()
  const location = useLocation()
  const { TextArea } = Input
  const [dataSource, setDataSource] = useState([])
  const [isShowDetils, setisShowDetils] = useState(false)
  const [detilsData, setDetilsData] = useState({})
  const [isShowChange, setisShowChange] = useState(false)
  const columns = [
    {
      title: '门店注册时间',
      dataIndex: 'create_time',
      align: 'center'
    },
    {
      title: '门店图片',
      dataIndex: 'head',
      align: 'center',
      render: (head) => (
        <Image
          width={60}
          height={60}
          src={head}
          fallback=""
        />
      )
    },
    {
      title: '门店名称 ',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '负责人',
      dataIndex: 'linkman',
      align: 'center'
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '门店地址',
      dataIndex: 'location',
      align: 'center',
      render: (location) => {
        return <div>{location ? JSON.parse(location).address : ''}</div>
      }
    },
    {
      title: '门店区域',
      dataIndex: 'region',
      align: 'center',
      render: (region) => {
        return <div>{region.includes('[') ? JSON.parse(region) : region}</div>
      }
    },
    {
      title: '合作方式',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '门店账号',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '门店密码',
      dataIndex: 'password',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (status) =>
        status == 0 ? (
          <div style={{ color: '#0078D7' }}>待审核</div>
        ) : status == 1 ? (
          <div style={{ color: '#707070' }}>已审核</div>
        ) : status == 2 ? (
          <div style={{ color: '#FF3737' }}>被驳回</div>
        ) : (
          ''
        )
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setisShowDetils(true)
              setDetilsData(data)
            }}
          >
            详情
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setisShowChange(true)
              setDetilsData(data)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={() => {
              DeleteFn(data)
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsdata = selectedRows.map((item) => {
        return item._id
      })
    }
  }

  // 获取列表
  const getList = async () => {
    const res = await getstorelist2(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          create_time: dayjs(item.create_time).format('YYYY-MM-DD'),
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 获取详情
  const getDetilsData = async (data) => {
    const res = await storePreorderedDetils(data)
    setDetilsData(res.data.res)
    console.log(detilsData)
  }

  const pageChangeFn = (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    getList()
  }
  // 删除
  const DeleteFn = async (data) => {
    const res = await storeDelete({ id: data._id })
    messageApi.success(res.data.message)
    getList()
  }
  // 导出
  const exportExcel = async () => {
    let data = {
      id: 'all'
    }
    if (selectedRowsdata.length > 0) {
      data = {
        id: selectedRowsdata
      }
    }
    const res = await storePreorderedCreateExcel(data)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '预约.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  // 搜索
  const porpsData = async (data) => {
    pageData = {
      page: 1,
      size: 10,
      total: 0,
      appid: localStorage.getItem('appid'),
      ...data
    }
    const res = await storeAuditSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  const checkChangeFn = async (data) => {
    pageData.status = data
    const res = await storeAuditSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 修改状态
  const changeStatusFn = async (value, status) => {
    if (value.password.split('').length >= 6) {
      value.status = status
      const res = await storeChange(value)
      setisShowChange(false)
      messageApi.success(res.data.message)
      getList()
    } else {
      messageApi.error('密码小于6位')
    }
  }
  return (
    <div>
      <Card>
        <SearchView typeList={typeList} porpsData={porpsData}></SearchView>
        <div className="headerButton">
          <Checkbox.Group
            options={checkBoxOptions}
            defaultValue={['Pear']}
            onChange={checkChangeFn}
          />
          <div>
            <Button
              type="primary"
              onClick={() => {
                exportExcel()
              }}
            >
              导出信息
            </Button>
          </div>
        </div>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection
          }}
          pagination={false}
          bordered
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
        />
        <div className="Pagin">
          <Pagination
            onChange={pageChangeFn}
            defaultCurrent={pageData.page}
            total={pageData.total}
          />
        </div>
      </Card>
      {/* 详情 */}
      <Modal
        open={isShowDetils}
        footer={[]}
        onCancel={() => {
          setisShowDetils(false)
        }}
      >
        <div className="detilsBoxAudit">
          <div className="cardBox">
            <div className="card" style={{ minHeight: '115px' }}>
              <div className="title">
                <div>门店信息</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <div className="storeInfo">
                <div style={{ marginRight: '10px' }}>
                  <Image width={120} height={120} src={detilsData.head} />
                </div>
                <Row>
                  <Col span={24} className="detilsSize">
                    <div>门店名称：{detilsData.name}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>负责人：{detilsData.linkman}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>联系方式：{detilsData.phone}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>所在区域：{detilsData.region}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>
                      详细地址：
                      {detilsData.location
                        ? JSON.parse(detilsData.location).address
                        : ''}
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
            <div className="card" style={{ minHeight: '80px' }}>
              <div className="title">
                <div>账号信息</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <Row>
                <Col span={24} className="detilsSize">
                  <div>账号：{detilsData.phone}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>密码：{detilsData.password}</div>
                </Col>
              </Row>
            </div>
            <div className="card" style={{ minHeight: '165px' }}>
              <div className="title">
                <div style={{ color: '#FF3737' }}>*温馨提示</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <Row>
                <Col span={24} className="detilsHint">
                  1、为帮助客户导航到贵店，请尽快填写详细地址；
                </Col>
                <Col span={24} className="detilsHint">
                  2、门店端登录时请使用门店名称或手机号作为登录账号；
                </Col>
                <Col span={24} className="detilsHint">
                  3、门店支持多设备同时登录，为保护您的门店账号安全，请妥善保管好您的账号及密码；
                </Col>
                <Col span={24} className="detilsHint">
                  4、若您忘记了登录密码，请联系平台处理；
                </Col>
              </Row>
            </div>
          </div>
        </div>
        <div>
          <div style={{ marginTop: '10px' }}>
            <div
              className="footButton center"
              onClick={() => {
                setisShowDetils(false)
              }}
            >
              返回
            </div>
          </div>
        </div>
      </Modal>
      {/* 编辑 */}
      <Modal
        open={isShowChange}
        footer={[]}
        onCancel={() => {
          setisShowChange(false)
        }}
      >
        <div className="detilsBoxAudit">
          <div className="cardBox">
            <div className="card" style={{ minHeight: '115px' }}>
              <Row>
                <Col span={24} className="detilsSize">
                  <div className="title">
                    <div>驳回意见</div>
                  </div>
                  <Divider style={{ margin: '10px 0' }} />
                  <div className="align_center">
                    门店状态：
                    {detilsData.status == 0 ? (
                      <span style={{ color: '#0078D7' }}>待审核</span>
                    ) : detilsData.status == 1 ? (
                      <span style={{ color: '#707070' }}>已审核</span>
                    ) : detilsData.status == 2 ? (
                      <span style={{ color: '#FF3737' }}>被驳回</span>
                    ) : (
                      ''
                    )}
                  </div>
                </Col>
              </Row>

              <Row>
                <Col span={24} className="detilsSize">
                  <div style={{ color: '#FF3737' }} className="align_center">
                    修改意见：
                    <TextArea
                      onChange={(value) => {
                        setDetilsData({
                          ...detilsData,
                          remark: value.target.value
                        })
                      }}
                      defaultValue={detilsData.remark}
                      style={{ width: '200px' }}
                      placeholder="请输入"
                    />
                  </div>
                </Col>
              </Row>
            </div>
            <div className="card" style={{ minHeight: '115px' }}>
              <div className="title">
                <div>门店信息</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <div className="storeInfo">
                <div style={{ marginRight: '10px' }}>
                  <Image width={120} height={120} src={detilsData.head} />
                </div>
                <Row>
                  <Col span={24} className="detilsSize">
                    <div>门店名称：{detilsData.name}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>负责人：{detilsData.linkman}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>联系方式：{detilsData.phone}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>所在区域：{detilsData.region}</div>
                  </Col>
                  <Col span={24} className="detilsSize">
                    <div>
                      详细地址：
                      {detilsData.location
                        ? JSON.parse(detilsData.location).address
                        : ''}
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
            <div className="card" style={{ minHeight: '80px' }}>
              <div className="title">
                <div>账号信息</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <Row>
                <Col span={24} className="detilsSize">
                  <div>账号：{detilsData.phone}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>
                    密码：
                    <Input
                      style={{ width: '200px' }}
                      placeholder="请输入"
                      defaultValue={detilsData.password}
                      onChange={(value) => {
                        setDetilsData({
                          ...detilsData,
                          password: value.target.value
                        })
                      }}
                    ></Input>
                  </div>
                </Col>
              </Row>
            </div>
            <div className="card" style={{ minHeight: '165px' }}>
              <div className="title">
                <div style={{ color: '#FF3737' }}>*温馨提示</div>
              </div>
              <Divider style={{ margin: '10px 0' }} />
              <Row>
                <Col span={24} className="detilsHint">
                  1、为帮助客户导航到贵店，请尽快填写详细地址；
                </Col>
                <Col span={24} className="detilsHint">
                  2、门店端登录时请使用门店名称或手机号作为登录账号；
                </Col>
                <Col span={24} className="detilsHint">
                  3、门店支持多设备同时登录，为保护您的门店账号安全，请妥善保管好您的账号及密码；
                </Col>
                <Col span={24} className="detilsHint">
                  4、若您忘记了登录密码，请联系平台处理；
                </Col>
              </Row>
            </div>
          </div>
        </div>
        <div>
          <div style={{ marginTop: '10px' }}>
            <div className="footButtonBox center">
              <div
                className="pass center"
                onClick={() => {
                  changeStatusFn(detilsData, 1)
                }}
              >
                审核通过
              </div>
              <div
                className="reject center"
                onClick={() => {
                  changeStatusFn(detilsData, 2)
                }}
              >
                驳回修改
              </div>
            </div>
          </div>
        </div>
      </Modal>
      {contextHolder}
    </div>
  )
})
export default App
